<!--
 * @Author: Aaron
 * @Date: 2021-11-25 09:47:54
 * @LastEditors: yanMeng
 * @LastEditTime: 2022-09-21 11:08:46
 * @Description: file content
 * @FilePath: \ias_ui\src\views\coi\making\storeInfo.vue
 * @Company: 沃尔玛
-->
<template>
  <div class="storeInfo">
    <headline :headline="commodityAttribute.channelName" />
    <el-form ref="ruleForm" class="dataForm" :model="commodityAttribute" label-width="150px" size="mini" label-position="left">
      <channel-attribute :commodity-attribute="commodityAttribute" :gutter="gutter" :span="span" :xl="xl" :is-disabled="isDisabled" />
      <category-attributes
        :commodity-attribute="commodityAttribute"
        :category-attributes="variable.keyAttributes"
        :span="span"
        :is-disabled="isDisabled"
        :xl="xl"
        att-name="关键属性"
      />
      <category-attributes
        :commodity-attribute="commodityAttribute"
        :category-attributes="variable.variableAttribute"
        :span="span"
        :xl="xl"
        :is-disabled="isDisabled"
        att-name="类目属性"
      />
      <category-attributes
        :commodity-attribute="commodityAttribute"
        :category-attributes="variable.salesAttribute"
        :span="span"
        :xl="xl"
        :is-disabled="isDisabled"
        att-name="销售属性"
      />
    </el-form>
  </div>
</template>

<script>
import headline from '@/views/coi/components/headline.vue'
import channelAttribute from './channelAttribute'
import categoryAttributes from '@/views/coi/components/categoryAttributes'
import eventBus from '@/utils/eventBus'

export default {
  name: 'StoreInfo',
  components: { headline, channelAttribute, categoryAttributes },
  props: {
    commodityAttribute: {
      type: Object,
      default: () => {
        return {}
      }
    },
    isDisabled: {
      type: Boolean,
      default: true
    },
    span: {
      type: Number,
      default: 12
    },
    xl: {
      type: Number,
      default: 8
    },
    gutter: {
      type: Number,
      default: 0
    }
  },
  computed: {
    // template结构
    variable() {
      const keyAttributes = Array.isArray(this.commodityAttribute.categoryAttributeList)
        ? this.commodityAttribute.categoryAttributeList.filter((item) => item.attributeType === 1)
        : [] // 关键属性
      const variableAttribute = Array.isArray(this.commodityAttribute.categoryAttributeList)
        ? this.commodityAttribute.categoryAttributeList.filter((item) => item.attributeType === 3)
        : [] // 类目属性
      const salesAttribute = Array.isArray(this.commodityAttribute.categoryAttributeList)
        ? this.commodityAttribute.categoryAttributeList.filter((item) => item.attributeType === 4)
        : [] // 销售属性
      return { keyAttributes, variableAttribute, salesAttribute }
    }
  },
  mounted() {
    eventBus.$on('dataChange', (data) => {
      const index = this.commodityAttribute.channelAttributeList.findIndex((item) => item.sign === data.key)
      if (index !== -1) this.commodityAttribute.channelAttributeList[index].attrValue = data.value
    })
  },
  methods: {
    submitForm() {
      let flag = null
      this.$refs.ruleForm.validate((valid) => {
        flag = valid
      })
      return flag
    }
  }
}
</script>

<style lang="scss" scoped>
.dataForm {
  padding: 0 10px;
}
/deep/ .head {
  font-size: 14px;
  font-weight: 700;
  margin: 15px 0;
}
/deep/ .el-select {
  width: 100% !important;
}
/deep/.el-date-editor {
  width: 100% !important;
}
/deep/ .el-col-12 {
  min-height: 50px;
}
/deep/ .el-form-item__label {
  height: 28px;
  line-height: unset;
  &::before {
    display: inline-block;
    content: '*';
    margin-right: 4px;
    color: #fff;
    height: 100%;
    vertical-align: middle;
    line-height: 28px;
  }
}
/deep/ .el-form-item__content {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
</style>
